'use client';
import { useState, useEffect } from 'react';
import Link from 'next/link';
import { usePathname } from 'next/navigation';
import { Bars3Icon, XMarkIcon, PhoneIcon } from '@heroicons/react/24/outline';

const navigation = [
  { name: '首页', href: '/' },
  { name: '产品中心', href: '/products' },
  { name: '应用场景', href: '/clients' },
  { name: '新闻资讯', href: '/news' },
  { name: '关于我们', href: '/about' },
  { name: '联系我们', href: '/contact' },
];

const productCategories = [
  { name: '木箱', href: '/products?category=box' },
  { name: '木卡板', href: '/products?category=pallet' },
  { name: '钢边木箱', href: '/products?category=steel-box' },
  { name: '胶合板', href: '/products?category=plywood' },
];

export default function Navbar() {
  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
  const [isScrolled, setIsScrolled] = useState(false);
  const pathname = usePathname();

  useEffect(() => {
    const handleScroll = () => {
      setIsScrolled(window.scrollY > 0);
    };

    window.addEventListener('scroll', handleScroll);
    return () => window.removeEventListener('scroll', handleScroll);
  }, []);

  const isActive = (href: string) => {
    if (href === '/') {
      return pathname === href;
    }
    return pathname.startsWith(href);
  };

  return (
    <header
      className={`bg-white ${
        isScrolled
          ? 'fixed top-0 left-0 right-0 shadow-lg transform duration-300 z-50'
          : 'shadow-md'
      }`}
    >
      <nav className="container mx-auto px-4" aria-label="Global">
        <div className="flex flex-col items-center justify-between py-6">
          <div className="flex lg:flex-1 w-full items-center">
            <div className="w-1/5"></div>
            <Link href="/" className="m-1 p-1 text-center">
              <span className="text-4xl lg:text-3xl font-bold text-primary">
                富强木制品（东莞）有限公司
              </span>
            </Link>
            <div className="hidden lg:flex flex-col items-center gap-4 text-gray-900 px-4 w-1/4">
              <a
                href="tel:13510099385"
                className="flex items-center gap-2 hover:text-red-600 transition-colors text-lg font-bold text-red-600"
              >
                <PhoneIcon className="h-5 w-5 text-red-600" />
                <span>李先生：13510099385</span>
              </a>
              <a
                href="tel:13510969489"
                className="flex items-center gap-2 hover:text-red-600 transition-colors text-lg font-bold text-red-600"
              >
                <PhoneIcon className="h-5 w-5 text-red-600" />
                <span>黄小姐：13510969489</span>
              </a>
            </div>
          </div>

          <div className="flex items-center gap-8">
            <div className="flex lg:hidden">
              <button
                type="button"
                className="-m-2.5 inline-flex items-center justify-center rounded-md p-2.5 text-gray-700"
                onClick={() => setMobileMenuOpen(true)}
              >
                <Bars3Icon className="h-6 w-6" aria-hidden="true" />
              </button>
            </div>
            <div className="hidden lg:flex lg:gap-x-12">
              {navigation.map((item) => (
                <Link
                  key={item.name}
                  href={item.href}
                  className={`text-xl font-semibold leading-6 transition-colors duration-200 ${
                    isActive(item.href)
                      ? 'text-green-600 relative after:absolute after:bottom-[-24px] after:left-0 after:w-full after:h-0.5 after:bg-green-600'
                      : 'text-gray-900 hover:text-green-600'
                  }`}
                >
                  {item.name}
                </Link>
              ))}
            </div>
          </div>
        </div>

        {/* Mobile menu */}
        <div className={`lg:hidden ${mobileMenuOpen ? 'block' : 'hidden'}`}>
          <div className="fixed inset-0 z-50">
            <div className="fixed inset-y-0 right-0 z-50 w-full overflow-y-auto bg-white px-6 py-6 sm:max-w-sm sm:ring-1 sm:ring-gray-900/10">
              <div className="flex items-center justify-between">
                <Link href="/" className="-m-1.5 p-1.5">
                  <span className="text-2xl font-bold text-primary">
                    富强木制品（东莞）有限公司
                  </span>
                </Link>
                <button
                  type="button"
                  className="-m-2.5 rounded-md p-2.5 text-gray-700"
                  onClick={() => setMobileMenuOpen(false)}
                >
                  <XMarkIcon className="h-6 w-6" aria-hidden="true" />
                </button>
              </div>
              <div className="mt-6 flow-root">
                <div className="-my-6 divide-y divide-gray-500/10">
                  {/* Mobile Phone Numbers */}
                  <div className="py-6">
                    <div className="space-y-4">
                      <a
                        href="tel:13510099385"
                        className="flex items-center gap-2 text-red-600 text-lg font-bold"
                      >
                        <PhoneIcon className="h-5 w-5 text-red-600" />
                        <span>13510099385</span>
                      </a>
                      <a
                        href="tel:13510969489"
                        className="flex items-center gap-2 text-red-600 text-lg font-bold"
                      >
                        <PhoneIcon className="h-5 w-5 text-red-600" />
                        <span>13510969489</span>
                      </a>
                    </div>
                  </div>
                  <div className="space-y-2 py-6">
                    {navigation.map((item) => (
                      <Link
                        key={item.name}
                        href={item.href}
                        className={`-mx-3 block rounded-lg px-3 py-2 text-base font-semibold leading-7 ${
                          isActive(item.href)
                            ? 'text-green-600 bg-green-50'
                            : 'text-gray-900 hover:bg-gray-50'
                        }`}
                        onClick={() => setMobileMenuOpen(false)}
                      >
                        {item.name}
                      </Link>
                    ))}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        {/* Product Categories */}
        {/* <div className="border-t">
          <div className="container mx-auto px-4">
            <div className="flex space-x-8 h-12 items-center text-sm">
              {productCategories.map((item) => (
                <Link
                  key={item.name}
                  href={item.href}
                  className={`transition-colors duration-200 ${
                    pathname.includes(item.href)
                      ? 'text-green-600 font-medium'
                      : 'text-gray-600 hover:text-green-600'
                  }`}
                >
                  {item.name}
                </Link>
              ))}
            </div>
          </div>
        </div> */}
      </nav>
    </header>
  );
}
